<template>
    <view>
        <u-tabs :list="tabChildrenList"
                name="name"
                paddingRight="20rpx"
                :current="currentTabIndex"
                @change="tabChange"
                height="80"
                font-size="32"
                bar-width="64"
                gutter="44"
                bg-color="#fff"
                inactive-color="#666666"
                active-color="#63B9F2"></u-tabs>
        <view v-if="leaveHistoryList.length>0"
              class="order_list padding_box margin_bottom_140">
            <view class="container_box"
                  v-for="(item,index) in leaveHistoryList"
                  :key="index">
                <view class="top_box u-flex u-row-between">
                    <view class="left_box">{{ item.productName }}</view>
                    <view v-if="item.status == 0"
                          class="reviewed">{{ item.status | statusFilter }}</view>
                    <view v-if="item.status == 1"
                          class="success">{{ item.status | statusFilter }}</view>
                    <view v-if="item.status == -1"
                          class="refund">{{ item.status | statusFilter }}</view>
                    <view v-if="item.status == 2"
                          class="revoke">{{ item.status | statusFilter }}</view>
                </view>
                <view class="info_box u-flex-col">
                    <view> <span>请假时间：</span>{{ item.leaveTime && item.leaveTime.substring(0,10) }}</view>
                    <view class="content_text">
                        <span>请假理由：</span>
                        {{ item.content }}
                    </view>
                </view>
                <view class="text_12_999 u-flex u-row-between u-col-center">
                    <view> <span style="color:#333;">申请时间：</span>{{ item.addTime }}</view>
                    <view v-if="item.status == 0"
                          @click="cancelLeave(item.id)"
                          class="cancel_box u-flex u-col-center u-row-center">撤销</view>
                </view>
            </view>
            <view class="load_box"
                  v-if="leaveHistoryList.length >= 3">
                <u-loadmore :status="loadingStatus" />
            </view>
        </view>
        <view v-else>
            <meu-empty top="50vh"
                       tipText="暂无请假记录" />
        </view>
        <view style="height: 1px;"></view>
        <div class="footer_box safe-area-inset-bottom u-flex u-row-between">
            <u-button class="btn_box"
                      @click="$goto('push', '/pages/leaveCenter/leaveCenter')"
                      type="primary"
                      :ripple="true"
                      shape="circle">{{ '我要请假' }}</u-button>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabChildrenList: [],
            childrenList: [],
            currentTabIndex: 0,
            leaveHistoryList: [],
            queryData: {
                id: '',
                pageSize: 5,
                pageNum: 1,
            },
            total: 0,
            loadingStatus: 'loadmore',
        }
    },
    watch: {
        'queryData.id': {
            handler(newV) {
                this.queryData.pageSize = 5
                this.queryData.pageNum = 1
                this.getChildrenLeaveHistory()
            }
        },
        currentTabIndex(newV) {
            this.queryData.id = this.childrenList[newV].childrenId
        },
    },
    filters: {
        statusFilter(status) {
            switch (status) {
                case 0:
                    return '待审批'
                case 1:
                    return '同意'
                case -1:
                    return '拒绝'
                case 2:
                    return '已撤销'
            }
        },
    },
    onReachBottom() {
        let length = this.leaveHistoryList.length;
        console.log("length", length)
        if (length <= this.total) {
            this.loadingStatus = 'loading'
            this.queryData.pageSize += 5
            this.getChildrenLeaveHistory()
        }

    },
    onLoad() {
        this.getChildren()

    },
    onShow() {
    },
    methods: {
        // 获取孩子列表
        getChildren() {
            this.$api.getChildren({}, (res) => {
                if (res.code == 0 && res.data.length != 0) {
                    this.childrenList = res.data
                    this.queryData.id = this.childrenList[0].childrenId
                    this.tabChildrenList = res.data.map(ele => { return { name: ele.childrenName } })
                }
            });
        },
        tabChange(e) {
            this.currentTabIndex = e;
        },
        getChildrenLeaveHistory() {
            this.$api.childrenLeaveHistory(this.queryData, res => {
                if (res.code == 0 && res.data) {
                    this.total = res.data.total
                    this.leaveHistoryList = res.data.list
                    if (res.data.list.length >= this.total) {
                        this.loadingStatus = 'nomore'
                    } else {
                        this.loadingStatus = 'loadmore'
                    }
                } else {
                    this.leaveHistoryList = []
                }
            });
        },
        cancelLeave(id) {
            this.$interactive.showModal('确定要撤销请假申请吗？', () => {
                this.$api.cancelLeave({ id: id }, res => {
                    if (res.code == 0) {
                        this.$interactive.toast('已撤销请假', 1500)
                        this.getChildrenLeaveHistory()
                    } else {
                        this.$interactive.toast('撤销失败', 1500)
                    }
                });
            });

        },
    }
}
</script>

<style lang="scss" scoped>
.container_box + .container_box {
    margin-top: 30rpx;
}
.btn_box {
    width: 100%;
}
.top_box {
    font-size: 24rpx;

    margin-bottom: 16rpx;
    .left_box {
        color: #333;
        font-weight: bold;
        font-size: 38rpx;
    }
    .success {
        color: #63b9f2;
    }
    .refund {
        color: #eb4b4b;
    }
    .reviewed {
        color: #e6a23c;
    }
    .revoke {
        color: #666;
    }
}
.info_box {
    .content_text {
        span {
            color: #333;
        }
        color: #999;
        margin: 32rpx 0;
        letter-spacing: 4rpx;
        line-height: 36rpx;
    }
}
.cancel_box {
    padding: 14rpx 34rpx;
    background: #f5f5f5;
    border-radius: 16rpx;
    font-size: 28rpx;
    color: #333;
}
</style>
